<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Babylon.js 光影效果演示</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { width: 100%; height: 100%; }
        #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-family: Arial, sans-serif;
            z-index: 100;
        }
        button {
            margin: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <div id="controls">
        <h3>Babylon.js 光影效果演示</h3>
        <button onclick="toggleDayNight()">昼夜循环</button>
        <button onclick="changeWeather('sunny')">晴天</button>
        <button onclick="changeWeather('cloudy')">阴天</button>
        <button onclick="changeWeather('rainy')">雨天</button>
        <button onclick="createLightning()">闪电效果</button>
        <button onclick="changeSeason()">季节变换</button>
        <p id="status">当前状态: 白天</p>
    </div>

    <script>
        // 全局变量
        let scene;
        let hemiLight;
        let sunLight; // 新增：太阳光源（方向性光源）
        let ground;
        let shadowGenerator; // 新增：阴影生成器
        let isDayNightActive = false;
        let currentSeason = 0;
        const seasonNames = ["春天", "夏天", "秋天", "冬天"];
        
        // ===== 1. 昼夜循环 =====
        window.toggleDayNight = function() {
            if (isDayNightActive) {
                // 停止所有动画，恢复默认
                scene.stopAnimation(hemiLight);
                scene.stopAnimation(sunLight); // 新增：停止太阳光源动画
                scene.stopAnimation(scene);
                
                // 恢复默认值
                hemiLight.intensity = 1.0;
                hemiLight.diffuse = new BABYLON.Color3(1, 1, 1);
                hemiLight.groundColor = new BABYLON.Color3(0.3, 0.4, 0.3);
                sunLight.intensity = 1.0; // 新增：恢复太阳光源强度
                scene.clearColor = new BABYLON.Color3(0.8, 0.9, 1.0);
                
                document.getElementById("status").textContent = "当前状态: 白天";
            } else {
                // 白天颜色
                const daySkyColor = new BABYLON.Color3(1, 1, 1);
                const dayGroundColor = new BABYLON.Color3(0.3, 0.4, 0.3);
                
                // 夜晚颜色
                const nightSkyColor = new BABYLON.Color3(0.1, 0.1, 0.3);
                const nightGroundColor = new BABYLON.Color3(0.05, 0.05, 0.1);
                
                // 昼夜循环动画 - 半球光intensity
                const hemiIntensityAnimation = new BABYLON.Animation(
                    "hemiIntensityAnimation", 
                    "intensity", 
                    30, 
                    BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
                );
                
                // 昼夜循环动画 - 半球光diffuse (天空颜色)
                const hemiDiffuseAnimation = new BABYLON.Animation(
                    "hemiDiffuseAnimation", 
                    "diffuse", 
                    30, 
                    BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
                );
                
                // 昼夜循环动画 - 半球光groundColor (地面颜色)
                const hemiGroundColorAnimation = new BABYLON.Animation(
                    "hemiGroundColorAnimation", 
                    "groundColor", 
                    30, 
                    BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
                );
                
                // 场景背景色动画
                const sceneAnimation = new BABYLON.Animation(
                    "sceneAnimation", 
                    "clearColor", 
                    30, 
                    BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
                );
                
                // 新增：太阳光源intensity动画
                const sunIntensityAnimation = new BABYLON.Animation(
                    "sunIntensityAnimation", 
                    "intensity", 
                    30, 
                    BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
                );
                
                // 新增：太阳光源方向动画（模拟太阳位置变化）
                const sunDirectionAnimation = new BABYLON.Animation(
                    "sunDirectionAnimation", 
                    "direction", 
                    30, 
                    BABYLON.Animation.ANIMATIONTYPE_VECTOR3, 
                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
                );
                
                // 动画关键帧
                const keys = [
                    { frame: 0, value: 0 },    // 夜晚
                    // { frame: 90, value: 0.5 },  // 黎明/黄昏
                    { frame: 180, value: 1 },   // 白天
                    // { frame: 270, value: 0.5 }, // 黄昏
                    { frame: 360, value: 0 }    // 夜晚
                ];
                
                // 设置所有动画的关键帧
                hemiIntensityAnimation.setKeys(keys.map(key => ({
                    frame: key.frame,
                    value: 0.5 + 0.5 * key.value // 0.5(夜晚)~1.0(白天)
                })));
                
                hemiDiffuseAnimation.setKeys(keys.map(key => ({
                    frame: key.frame,
                    value: BABYLON.Color3.Lerp(nightSkyColor, daySkyColor, key.value)
                })));
                
                hemiGroundColorAnimation.setKeys(keys.map(key => ({
                    frame: key.frame,
                    value: BABYLON.Color3.Lerp(nightGroundColor, dayGroundColor, key.value)
                })));
                
                // 设置场景背景色动画的关键帧
                sceneAnimation.setKeys(keys.map(key => ({
                    frame: key.frame,
                    value: BABYLON.Color3.Lerp(
                        new BABYLON.Color3(0.05, 0.05, 0.1),  // 夜晚背景
                        new BABYLON.Color3(0.8, 0.9, 1.0),    // 白天背景
                        key.value
                    )
                })));
                
                // 新增：设置太阳光源intensity动画的关键帧
                sunIntensityAnimation.setKeys(keys.map(key => ({
                    frame: key.frame,
                    value: 0.0 + 1.5 * key.value // 0.0(夜晚)~1.5(白天)
                })));
                
                // 新增：设置太阳光源方向动画的关键帧
                sunDirectionAnimation.setKeys([
                    { frame: 0, value: new BABYLON.Vector3(-1, -1, -1) },    // 夜晚（太阳在地平线以下）
                    { frame: 90, value: new BABYLON.Vector3(-0.5, -1, -0.5) },  // 黎明
                    { frame: 180, value: new BABYLON.Vector3(0, -2, 0) },   // 白天
                    { frame: 270, value: new BABYLON.Vector3(0.5, -1, 0.5) }, // 黄昏
                    { frame: 360, value: new BABYLON.Vector3(1, -1, 1) }    // 夜晚
                ]);
                
                // 开始所有动画
                scene.beginDirectAnimation(hemiLight, [hemiIntensityAnimation], 0, 360, true);
                scene.beginDirectAnimation(hemiLight, [hemiDiffuseAnimation], 0, 360, true);
                scene.beginDirectAnimation(hemiLight, [hemiGroundColorAnimation], 0, 360, true);
                scene.beginDirectAnimation(scene, [sceneAnimation], 0, 360, true);
                
                // 新增：开始太阳光源动画
                scene.beginDirectAnimation(sunLight, [sunIntensityAnimation], 0, 360, true);
                scene.beginDirectAnimation(sunLight, [sunDirectionAnimation], 0, 360, true);
                
                // 更新状态文本的回调函数
                const updateStatus = function(frame) {
                    const value = frame / 360;
                    if (value < 0.25) {
                        document.getElementById("status").textContent = "当前状态: 夜晚";
                    } else if (value < 0.4) {
                        document.getElementById("status").textContent = "当前状态: 黎明";
                    } else if (value < 0.6) {
                        document.getElementById("status").textContent = "当前状态: 白天（有影子）";
                    } else if (value < 0.75) {
                        document.getElementById("status").textContent = "当前状态: 黄昏";
                    } else {
                        document.getElementById("status").textContent = "当前状态: 夜晚";
                    }
                };
                
                // 初始更新状态文本
                updateStatus(0);
                
                // 添加动画事件监听
                sceneAnimation.onAnimationFrame = function(currentFrame) {
                    updateStatus(currentFrame);
                };
            }
            isDayNightActive = !isDayNightActive;
        };
        
        // ===== 2. 天气变化 =====
        window.changeWeather = function(weatherType) {
            // 停止昼夜循环动画
            if (isDayNightActive) {
                toggleDayNight();
            }
            
            let skyColor, groundColor, intensity, clearColor, sunIntensity;
            
            switch(weatherType) {
                case "sunny":
                    skyColor = new BABYLON.Color3(1, 1, 1);
                    groundColor = new BABYLON.Color3(0.3, 0.4, 0.3);
                    intensity = 1.0;
                    clearColor = new BABYLON.Color3(0.8, 0.9, 1.0);
                    sunIntensity = 1.5; // 晴天太阳强度高，影子明显
                    document.getElementById("status").textContent = "当前状态: 晴天（有影子）";
                    break;
                case "cloudy":
                    skyColor = new BABYLON.Color3(0.7, 0.7, 0.8);
                    groundColor = new BABYLON.Color3(0.2, 0.2, 0.3);
                    intensity = 0.7;
                    clearColor = new BABYLON.Color3(0.6, 0.6, 0.7);
                    sunIntensity = 0.3; // 阴天太阳强度低，影子较淡
                    document.getElementById("status").textContent = "当前状态: 阴天（影子淡）";
                    break;
                case "rainy":
                    skyColor = new BABYLON.Color3(0.4, 0.4, 0.6);
                    groundColor = new BABYLON.Color3(0.1, 0.1, 0.2);
                    intensity = 0.4;
                    clearColor = new BABYLON.Color3(0.4, 0.4, 0.5);
                    sunIntensity = 0.1; // 雨天太阳几乎被遮挡，影子很弱
                    document.getElementById("status").textContent = "当前状态: 雨天（影子弱）";
                    break;
            }
            
            // 创建颜色动画
            const colorAnimation = new BABYLON.Animation(
                "colorAnimation", 
                "diffuse", 
                30, 
                BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            const intensityAnimation = new BABYLON.Animation(
                "intensityAnimation", 
                "intensity", 
                30, 
                BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            const groundColorAnimation = new BABYLON.Animation(
                "groundColorAnimation", 
                "groundColor", 
                30, 
                BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            // 场景背景色动画
            const clearColorAnimation = new BABYLON.Animation(
                "clearColorAnimation", 
                "clearColor", 
                30, 
                BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            // 新增：太阳光源强度动画
            const sunIntensityAnimation = new BABYLON.Animation(
                "sunIntensityAnimation", 
                "intensity", 
                30, 
                BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            // 设置动画关键帧
            colorAnimation.setKeys([
                { frame: 0, value: hemiLight.diffuse },
                { frame: 60, value: skyColor }
            ]);
            
            intensityAnimation.setKeys([
                { frame: 0, value: hemiLight.intensity },
                { frame: 60, value: intensity }
            ]);
            
            groundColorAnimation.setKeys([
                { frame: 0, value: hemiLight.groundColor },
                { frame: 60, value: groundColor }
            ]);
            
            clearColorAnimation.setKeys([
                { frame: 0, value: scene.clearColor },
                { frame: 60, value: clearColor }
            ]);
            
            // 新增：设置太阳光源强度动画的关键帧
            sunIntensityAnimation.setKeys([
                { frame: 0, value: sunLight.intensity },
                { frame: 60, value: sunIntensity }
            ]);
            
            // 开始动画
            scene.beginDirectAnimation(hemiLight, [colorAnimation], 0, 60, false);
            scene.beginDirectAnimation(hemiLight, [intensityAnimation], 0, 60, false);
            scene.beginDirectAnimation(hemiLight, [groundColorAnimation], 0, 60, false);
            scene.beginDirectAnimation(scene, [clearColorAnimation], 0, 60, false);
            
            // 新增：开始太阳光源强度动画
            scene.beginDirectAnimation(sunLight, [sunIntensityAnimation], 0, 60, false);
        };
        
        // ===== 3. 闪电效果 =====
        window.createLightning = function() {
            // 停止昼夜循环动画
            if (isDayNightActive) {
                toggleDayNight();
            }
            
            const originalIntensity = hemiLight.intensity;
            const originalDiffuse = hemiLight.diffuse.clone();
            const originalClearColor = scene.clearColor.clone();
            const originalSunIntensity = sunLight.intensity; // 新增：保存太阳光源原始强度
            
            // 闪电动画
            const lightningAnimation = new BABYLON.Animation(
                "lightningAnimation", 
                "intensity", 
                60, 
                BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            // 颜色变化
            const colorAnimation = new BABYLON.Animation(
                "lightningColorAnimation", 
                "diffuse", 
                60, 
                BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            // 场景背景色变化
            const clearColorAnimation = new BABYLON.Animation(
                "clearColorAnimation", 
                "clearColor", 
                60, 
                BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            // 新增：太阳光源强度变化（闪电时增强）
            const sunIntensityAnimation = new BABYLON.Animation(
                "sunIntensityAnimation", 
                "intensity", 
                60, 
                BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            // 设置动画关键帧
            lightningAnimation.setKeys([
                { frame: 0, value: originalIntensity },
                { frame: 2, value: 2.0 },  // 非常亮的闪电
                { frame: 5, value: 0.8 },  // 快速衰减
                { frame: 8, value: 1.5 },  // 二次闪光
                { frame: 15, value: originalIntensity }  // 恢复正常
            ]);
            
            colorAnimation.setKeys([
                { frame: 0, value: originalDiffuse },
                { frame: 2, value: new BABYLON.Color3(1, 1, 1) },  // 白色闪电
                { frame: 15, value: originalDiffuse }  // 恢复
            ]);
            
            clearColorAnimation.setKeys([
                { frame: 0, value: originalClearColor },
                { frame: 2, value: new BABYLON.Color3(1, 1, 1) },  // 白色闪电
                { frame: 15, value: originalClearColor }  // 恢复
            ]);
            
            // 新增：太阳光源强度动画关键帧
            sunIntensityAnimation.setKeys([
                { frame: 0, value: originalSunIntensity },
                { frame: 2, value: 3.0 },  // 闪电时光源极强
                { frame: 5, value: 0.5 },  // 快速衰减
                { frame: 8, value: 2.0 },  // 二次闪光
                { frame: 15, value: originalSunIntensity }  // 恢复正常
            ]);
            
            // 开始动画
            scene.beginDirectAnimation(hemiLight, [lightningAnimation], 0, 15, false);
            scene.beginDirectAnimation(hemiLight, [colorAnimation], 0, 15, false);
            scene.beginDirectAnimation(scene, [clearColorAnimation], 0, 15, false);
            
            // 新增：开始太阳光源强度动画
            scene.beginDirectAnimation(sunLight, [sunIntensityAnimation], 0, 15, false);
            
            document.getElementById("status").textContent = "当前状态: 闪电";
            
            // 恢复状态文本
            setTimeout(() => {
                document.getElementById("status").textContent = "当前状态: 正常";
            }, 500);
        };
        
        // ===== 4. 季节变化 =====
        window.changeSeason = function() {
            // 停止昼夜循环动画
            if (isDayNightActive) {
                toggleDayNight();
            }
            
            currentSeason = (currentSeason + 1) % 4;
            const seasonKey = Object.keys(seasons)[currentSeason];
            const season = seasons[seasonKey];
            
            document.getElementById("status").textContent = `当前状态: ${seasonNames[currentSeason]}`;
            
            // 创建季节变化动画
            const skyAnimation = new BABYLON.Animation(
                "skyAnimation", 
                "diffuse", 
                30, 
                BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            const groundAnimation = new BABYLON.Animation(
                "groundAnimation", 
                "groundColor", 
                30, 
                BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            // 场景背景色动画
            const clearAnimation = new BABYLON.Animation(
                "clearAnimation", 
                "clearColor", 
                30, 
                BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            // 地面材质颜色动画
            const groundMatAnimation = new BABYLON.Animation(
                "groundMatAnimation", 
                "diffuseColor", 
                30, 
                BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            // 新增：太阳光源颜色动画（不同季节太阳颜色略有不同）
            const sunColorAnimation = new BABYLON.Animation(
                "sunColorAnimation", 
                "diffuse", 
                30, 
                BABYLON.Animation.ANIMATIONTYPE_COLOR3, 
                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
            );
            
            // 设置关键帧
            skyAnimation.setKeys([
                { frame: 0, value: hemiLight.diffuse },
                { frame: 90, value: season.sky }
            ]);
            
            groundAnimation.setKeys([
                { frame: 0, value: hemiLight.groundColor },
                { frame: 90, value: season.ground }
            ]);
            
            clearAnimation.setKeys([
                { frame: 0, value: scene.clearColor },
                { frame: 90, value: season.clear }
            ]);
            
            groundMatAnimation.setKeys([
                { frame: 0, value: ground.material.diffuseColor },
                { frame: 90, value: season.ground }
            ]);
            
            // 新增：太阳光源颜色动画关键帧
            sunColorAnimation.setKeys([
                { frame: 0, value: sunLight.diffuse },
                { frame: 90, value: season.sunColor }
            ]);
            
            // 开始动画
            scene.beginDirectAnimation(hemiLight, [skyAnimation], 0, 90, false);
            scene.beginDirectAnimation(hemiLight, [groundAnimation], 0, 90, false);
            scene.beginDirectAnimation(scene, [clearAnimation], 0, 90, false);
            scene.beginDirectAnimation(ground.material, [groundMatAnimation], 0, 90, false);
            
            // 新增：开始太阳光源颜色动画
            scene.beginDirectAnimation(sunLight, [sunColorAnimation], 0, 90, false);
        };
        
        // 四季颜色
        const seasons = {
            spring: { 
                sky: new BABYLON.Color3(1, 1, 1), 
                ground: new BABYLON.Color3(0.2, 0.5, 0.2),
                clear: new BABYLON.Color3(0.7, 0.9, 0.8),
                sunColor: new BABYLON.Color3(1, 0.95, 0.8)  // 春天太阳偏暖黄色
            },
            summer: { 
                sky: new BABYLON.Color3(1, 1, 0.9), 
                ground: new BABYLON.Color3(0.1, 0.4, 0.1),
                clear: new BABYLON.Color3(0.6, 0.85, 0.95),
                sunColor: new BABYLON.Color3(1, 0.9, 0.7)  // 夏天太阳偏金黄色
            },
            autumn: { 
                sky: new BABYLON.Color3(1, 0.9, 0.8), 
                ground: new BABYLON.Color3(0.5, 0.3, 0.1),
                clear: new BABYLON.Color3(0.9, 0.8, 0.7),
                sunColor: new BABYLON.Color3(1, 0.8, 0.6)  // 秋天太阳偏橙红色
            },
            winter: { 
                sky: new BABYLON.Color3(0.9, 0.9, 1), 
                ground: new BABYLON.Color3(0.8, 0.8, 0.9),
                clear: new BABYLON.Color3(0.8, 0.85, 0.95),
                sunColor: new BABYLON.Color3(0.9, 0.95, 1)  // 冬天太阳偏蓝白色
            }
        };
        
        // 创建场景
        const createScene = function() {
            const scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0.8, 0.9, 1.0);
            
            // 创建相机
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);
            
            // 创建地面
            ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 20, height: 20 }, scene);
            const groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
            groundMaterial.diffuseColor = new BABYLON.Color3(0.3, 0.4, 0.3); // 绿色地面
            ground.material = groundMaterial;
            
            // 创建一些立方体作为场景元素
            for (let i = -2; i <= 2; i++) {
                for (let j = -2; j <= 2; j++) {
                    if (i !== 0 || j !== 0) { // 避免中心位置
                        const box = BABYLON.MeshBuilder.CreateBox(`box_${i}_${j}`, { size: 1 }, scene);
                        box.position = new BABYLON.Vector3(i * 2, 0.5, j * 2);
                        
                        const boxMaterial = new BABYLON.StandardMaterial(`boxMaterial_${i}_${j}`, scene);
                        boxMaterial.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());
                        box.material = boxMaterial;
                        
                        // 新增：启用所有立方体接收阴影
                        box.receiveShadows = true;
                        
                        // 新增：为所有立方体启用阴影投射
                        if (shadowGenerator) {
                            shadowGenerator.addShadowCaster(box);
                        }
                    }
                }
            }
            
            // 创建半球光（环境光）
            hemiLight = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);
            hemiLight.intensity = 1.0;
            hemiLight.diffuse = new BABYLON.Color3(1, 1, 1);       // 白色天空
            hemiLight.groundColor = new BABYLON.Color3(0.3, 0.4, 0.3);  // 绿色地面
            
            // 新增：创建太阳光源（方向性光源，用于产生影子）
            sunLight = new BABYLON.DirectionalLight("sunLight", new BABYLON.Vector3(-1, -2, -1), scene);
            sunLight.position = new BABYLON.Vector3(0, 10, 0);
            sunLight.intensity = 1.0;
            sunLight.diffuse = new BABYLON.Color3(1, 0.95, 0.8);  // 初始太阳颜色
            
            // 新增：创建阴影生成器
            shadowGenerator = new BABYLON.ShadowGenerator(1024, sunLight);
            shadowGenerator.useBlurExponentialShadowMap = true; // 使用模糊阴影
            shadowGenerator.blurKernel = 32; // 阴影模糊程度
            
            // 新增：让地面接收阴影
            ground.receiveShadows = true;
            
            // 修复：确保在创建阴影生成器后再添加阴影投射物
            for (let i = -2; i <= 2; i++) {
                for (let j = -2; j <= 2; j++) {
                    if (i !== 0 || j !== 0) {
                        const box = scene.getMeshByName(`box_${i}_${j}`);
                        if (box && shadowGenerator) {
                            shadowGenerator.addShadowCaster(box);
                        }
                    }
                }
            }
            
            return scene;
        };
        
        // 初始化场景
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);
        scene = createScene();
        
        // 渲染循环
        engine.runRenderLoop(function() {
            scene.render();
        });
        
        // 响应窗口大小变化
        window.addEventListener("resize", function() {
            engine.resize();
        });
    </script>
</body>
</html>
    